<template>
    <div id="app">

        <el-container >
            <el-menu style="width: 100%;"
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="4">处理中心</el-menu-item>
                <el-menu-item index="3" >消息中心</el-menu-item>
                <el-menu-item index="2">订单管理</el-menu-item>
                <el-submenu index="1">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-container>

        <el-container style="height: 98%; border: 1px solid #eee">
            <el-aside width="300px" height="98%" style="background-color: gainsboro">
                <el-menu height="98%" :default-openeds="['1', '2', '3','4']">
                    <!--第一层-->
                    <el-submenu :index="resolveParentPath(firstIndex)" v-for="(firstMenus,firstIndex) in myMenus">
                        <template slot="title" ><i class="el-icon-message"></i>
                            <router-link :to="firstMenus.url">{{firstMenus.text}}</router-link>
                        </template>
                        <!--第2层-->
                        <el-submenu :index="resolveParentPath(secondIndex)" v-for="(secondMenu,secondIndex) in firstMenus.child">
                            <template slot="title"><i class="el-icon-message"></i>
                                <router-link :to="secondMenu.url">{{secondMenu.text}}</router-link>
                            </template>
                            <!--第3层-->
                            <el-menu-item-group v-for="(threeMenu,threeIndex) in secondMenu.child">
                                <router-link :to="threeMenu.url">
                                    <el-menu-item :index="resolvePath(firstIndex,secondIndex,threeIndex)">{{threeMenu.text}}</el-menu-item>
                                </router-link>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script>


    export default {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                activeIndex: '1',
                activeIndex2: '1',
                myMenus: [
                    {
                        text: '普通样式',
                        url: '/simpleCss',
                        child: [
                            {
                                text: '首页',
                                url: '/index'
                            },
                            {
                                text: '表单',
                                url: '/form',
                                child: [
                                    {
                                        text: '输入框',
                                        url: '/input',
                                    },
                                    {
                                        text: '下拉选择',
                                        url: '/dropdown',
                                    },
                                    {
                                        text: '导航栏',
                                        url: '/navigationbar',
                                    },
                                    {
                                        text: '提示',
                                        url: '/tip',
                                    },
                                    {
                                        text: '画廊',
                                        url: '/gallery',
                                    },
                                    {
                                        text: '透明画',
                                        url: '/opacity',
                                    },
                                    {
                                        text: '图像拼接',
                                        url: '/imagemosaic',
                                    },
                                    {
                                        text: '简单表单',
                                        url: '/simpleform',
                                    },
                                    {
                                        text: '边框画',
                                        url: '/borderimg',
                                    },
                                    {
                                        text: '按钮',
                                        url: '/button',
                                    }
                                ]
                            },
                            {
                                text: '日期选择',
                                url: '/date',
                                child: [
                                    {
                                        text: '普通日期',
                                        url: '/simplateDate',
                                    },
                                    {
                                        text: '时分秒日期',
                                        url: '/smallDate',
                                    }
                                ]
                            },
                            {
                                text: '图表',
                                url: '/chart',
                                child: [
                                    {
                                        text: '柱状图',
                                        url: '/simplateDate',
                                    },
                                    {
                                        text: '条形图',
                                        url: '/smallDate',
                                    }
                                ]
                            },
                            {
                                text: '表格',
                                url: '/table',
                                child: [
                                    {
                                        text: '简单表格',
                                        url: '/simple',
                                    },
                                    {
                                        text: '复杂表格',
                                        url: '/difficult',
                                    },
                                    {
                                        text: '可编辑表格',
                                        url: '/edit',
                                    }
                                ]
                            }
                        ]
                    }, {
                        text: 'Element样式',
                        url: '/e-simpleCss',
                        child: [
                            {
                                text: '首页',
                                url: '/e-index'
                            },
                            {
                                text: '布局',
                                url: '/e-layout',
                                child:[
                                    {
                                        text: 'layout布局',
                                        url: '/el-myLayout',
                                    },
                                    {
                                        text: 'container布局',
                                        url: '/el-mySelect',
                                }]
                            },
                            {
                                text: '表单',
                                url: '/e-form',
                                child: [
                                    {
                                        text: '输入框',
                                        url: '/el-myElInput',
                                    },
                                    {
                                        text: '单选框',
                                        url: '/el-myRadio',
                                    },
                                    {
                                        text: '多选框',
                                        url: '/el-myCheckBox',
                                    },
                                    {
                                        text: '计数器',
                                        url: '/el-myInputNumber',
                                    },
                                    {
                                        text: '开关',
                                        url: '/el-mySwitch',
                                    },
                                    {
                                        text: '滑块',
                                        url: '/el-mySlider',
                                    },
                                    {
                                        text: '时间选择器',
                                        url: '/el-myTimePicker',
                                    },
                                    {
                                        text: '日期选择器',
                                        url: '/el-myDatePicker',
                                    },
                                    {
                                        text: '日期时间选择器',
                                        url: '/el-myDateTimePicker',
                                    },
                                    {
                                        text: '上传',
                                        url: '/el-myUpLoad',
                                    },
                                    {
                                        text: '评分',
                                        url: '/el-myRate',
                                    },
                                    {
                                        text: '穿梭框',
                                        url: '/el-myTransfer',
                                    },
                                    {
                                        text: '表单',
                                        url: '/el-myForm',
                                    },
                                    {
                                        text: '表格',
                                        url: '/el-myTable',
                                    },
                                    {
                                        text: '下拉选择器',
                                        url: '/el-mySelect',
                                    },
                                    {
                                        text: '级联选择器',
                                        url: '/el-myCascader',
                                    },
                                    {
                                        text: '导航栏',
                                        url: '/e-navigationbar',
                                    },
                                    {
                                        text: '提示',
                                        url: '/e-tip',
                                    },
                                    {
                                        text: '画廊',
                                        url: '/e-gallery',
                                    },
                                    {
                                        text: '简单表单',
                                        url: '/e-simpleform',
                                    },
                                    {
                                        text: '按钮',
                                        url: '/el-myButton',
                                    }
                                ]
                            },
                            {
                                text: '日期选择',
                                url: '/e-date',
                                child: [
                                    {
                                        text: '普通日期',
                                        url: '/e-simplateDate',
                                    },
                                    {
                                        text: '时分秒日期',
                                        url: '/e-smallDate',
                                    }
                                ]
                            },
                            {
                                text: '图表',
                                url: '/e-chart',
                                child: [
                                    {
                                        text: '柱状图',
                                        url: '/e-simplateDate',
                                    },
                                    {
                                        text: '条形图',
                                        url: '/e-smallDate',
                                    }
                                ]
                            },
                            {
                                text: '表格',
                                url: '/e-table',
                                child: [
                                    {
                                        text: '简单表格',
                                        url: '/e-simple',
                                    },
                                    {
                                        text: '复杂表格',
                                        url: '/e-difficult',
                                    },
                                    {
                                        text: '可编辑表格',
                                        url: '/e-edit',
                                    }
                                ]
                            }
                        ]
                    }

                ]
            }
        },
        methods: {
            startHacking() {
                this.$notify({
                    title: 'It works!',
                    type: 'success',
                    message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
                    duration: 5000
                })
            },
            resolveParentPath(first) {
                return first + "";
            },
            resolvePath(first, second,tree) {
                let tmp = first + "-" + second + "-" + tree + "";
                return tmp;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>

    a {
        text-decoration-line: none;
        color: black;
    }

    html, body {
        height: 98%;
        background-color: whitesmoke;
        overflow: no-display;
    }

    #app {
        font-family: Helvetica, sans-serif;
        /*text-align: center;*/
        height: 98%;
    }

    .el-header {
        background-color: deepskyblue;
        color: #ffffff;
        line-height: 60px;
    }

    .el-aside {
        color: #ffffff;
        margin-top: 1em;
    }

    .el-menu {
        height: 98%;
    }

    .el-submenu__title, .el-menu-item-group__title, .el-submenu .el-menu-item {
        text-align: left;
    }

    .el-menu-item-group__title, .el-submenu .el-menu-item {
        margin-left: 2em;
    }


    /*黑色滚动体*/
    #app::-webkit-scrollbar {

        width: 10px;

        height: 1px;

    }

    #app::-webkit-scrollbar-thumb {

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #535353;

    }

    #app::-webkit-scrollbar-track {

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: #EDEDED;

    }


    /*滚动条：*/
    .el-aside::-webkit-scrollbar { /*滚动条整体样式*/

        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

    .el-aside::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 10px;

        background-color: #F90;

        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);

    }

    .el-aside::-webkit-scrollbar-track { /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        /*border-radius: 10px;*/

        background: #EDEDED;

    }

    .el-menu--horizontal>.el-submenu .el-submenu__title {
         height: 62px;
        line-height: 60px;
        border-bottom: 2px solid transparent;
        color: #909399;
    }

    .el-menu--horizontal>.el-menu-item {
        float: left;
        height: 60px;
        line-height: 60px;
        margin: 0;
        border-bottom: 2px solid transparent;
        color: #909399;
        float: right;
    }

    .el-menu-demo el-menu--horizontal el-menu li{
        float:right;
    }
</style>
